<html>
    <head>
        <title>有序列表</title>
        <style>
            img {
                width: 20px;
                height: 10px;
            }
            #tips {
                color:red;
            }
            p#title {
                font-size: 25px;
        
                }
        </style>
    </head>
    <body>
      
       <p>登录界面</p>
        <div>
            账号：<input type="text" name="account" id="account">
            密码：<input type="password" name="password" id="password">
        </div>
        <div>
            <input type="submit" name="submit" id="submit" value="登录">
            <button type="button"><img src="../data/button.png" alt="">忘记密码</button>
        </div>
        <div id='tips'> 
            <p>
               <p id='title'>input：</p> 
               <ol>
                <li>通过type=text定义文本输入框</li>
                <li>通过type=button定义一个单纯的按钮功能</li>
                <li>通过type=submit定义一个提交表单的按钮功能</li>
                <li>通过type=passwor定义输入框为密码框</li>
            </ol>
            </p>
            <p>
                <p id='title'>button：</p> 
                <ol>
                    <li>通过type=button定义一个单纯的按钮功能</li>
                    <li>通过type=submit定义一个提交表单的按钮功能</li>
                    <li>通过type=reset定义一个重置的按钮功能</li>
                </ol>
            </p>
         <p>submit默认为form提交，可以提交表单（form）.</p>
         <p>button则响应用户自定义的事件,如果不指定onclick等事件处理函</p>
         <p id='title'>button和input的区别：</p>
         <ul>
             <li>input定义的按钮：按钮上的文案，必须通过value定义</li>
             <li>button定义的按钮，按钮上的文本，在button标签对之间，也可以设置按钮图像等，可扩展性比input强</li>
             <li>不同浏览器识别按钮文案方式不同，所以建议html中使用input定义按钮</li>
         </ul>   
    </div>
    </body>
</html>